<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap 核心CSS -->
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../../static/css/font-awesome.min.css" th:href="@{/static/css/font-awesome.min.css}">
    <link rel="stylesheet" href="../../static/css/fileinput.css" th:href="@{/static/css/fileinput.css}">
    <!-- Meta关键字定义 -->
    <meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

    <style>
        body {font-size: .875rem;}
        .feather {width: 16px;height: 16px;vertical-align: text-bottom;}
        .sidebar {position: fixed;top: 0;bottom: 0;left: 0;z-index: 100;padding: 0;box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);}
        .sidebar-sticky {position: -webkit-sticky;position: sticky;top: 48px; height: calc(100vh - 48px);padding-top: .5rem;overflow-x: hidden;overflow-y: auto; }
        .sidebar .nav-link {font-weight: 500;color: #333;}
        .sidebar .nav-link .feather {margin-right: 4px;color: #999;}
        .sidebar .nav-link.active {color: #007bff;}
        .sidebar .nav-link:hover .feather,.sidebar .nav-link.active .feather {color: inherit;}
        .sidebar-heading {font-size: .75rem;text-transform: uppercase;}
        .navbar-brand {padding-top: .75rem;padding-bottom: .75rem;font-size: 1rem;background-color: rgba(0, 0, 0, .25);box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);}
        .navbar .form-control {padding: .75rem 1rem;border-width: 0;border-radius: 0;}
        .form-control-dark {color: #fff;background-color: rgba(255, 255, 255, .1);border-color: rgba(255, 255, 255, .1);}
        .form-control-dark:focus {border-color: transparent;box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);}
        .border-top { border-top: 1px solid #e5e5e5; }
        .border-bottom { border-bottom: 1px solid #e5e5e5; }
    </style>
</head>
<body>
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
        <!--<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">-->
        <!--<button class="btn-dark btn"  style="width: 20%" type="submit">搜索</button>-->
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="#">Sign out</a>
            </li>
        </ul>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <nav class="col-md-2 d-none d-md-block bg-light sidebar" style="position: fixed;z-index: 10;">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <span data-feather="home"></span>
                                分析 <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/orders">
                                <span data-feather="file"></span>
                                未处理订单
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/returns">
                                <span data-feather="file"></span>
                                退货单
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/historyOrders">
                                <span data-feather="file"></span>
                                历史处理订单
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/goods">
                                <span data-feather="shopping-cart"></span>
                                商品
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span data-feather="bar-chart-2"></span>
                                Reports
                            </a>
                        </li>
                    </ul>

                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                        <span>Saved reports</span>
                        <a class="d-flex align-items-center text-muted" href="#">
                            <span data-feather="plus-circle"></span>
                        </a>
                    </h6>
                    <ul class="nav flex-column mb-2">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span data-feather="file-text"></span>
                                Current month
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span data-feather="file-text"></span>
                                Last quarter
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span data-feather="file-text"></span>
                                Social engagement
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                <span data-feather="file-text"></span>
                                Year-end sale
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                    <h1 class="h2">Dashboard</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group mr-2">
                            <button class="btn btn-sm btn-outline-secondary">Share</button>
                            <button class="btn btn-sm btn-outline-secondary">Export</button>
                        </div>
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                            <span data-feather="calendar"></span>
                            This week
                        </button>
                    </div>
                </div>
                <a href="javascript:history.go(-1)">返回上一页</a> 
                <div class="custom-file ">
                    <!--th:action="@{'/ShareUpload/'+${session.user.getUID()}}"-->
                    <form id="uploadForm"  action="/upload/uploadGoods" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="_method" value="put" th:if="${good!=null}"/>
                        <input type="hidden" id="state" name="state"/>
                        <input type="hidden" name="path" value="/goods"/>
                        <input type="hidden" name="id" th:if="${good!=null}" th:value="${good.id}">
                        <div class="form-group">
                            <label>name</label>
                            <input id="name" name="name" type="text" class="form-control" placeholder="space" th:value="${good!=null}?${good.name}">
                        </div>
                        <div class="form-group">
                            <label>buying_price</label>
                            <input id="buying_price" name="buying_price" class="form-control" placeholder="0.00" th:value="${good!=null}?${good.buying_price}">
                        </div>
                        <div class="form-group">
                            <label>selling_price</label>
                            <input id="selling_price" name="selling_price" class="form-control" placeholder="0.00" th:value="${good!=null}?${good.selling_price}">
                        </div>
                        <div class="form-group">
                            <label>place</label>
                            <input id="place" name="place" class="form-control"th:value="${good!=null}?${good.place}">
                        </div>
                        <div class="form-group">
                            <label>state</label><br>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="state" value="1" th:checked="${good!=null}?${good.state==1}">
                                <label class="form-check-label">上架</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="state" value="0" th:checked="${good!=null}?${good.state==0}:true">
                                <label class="form-check-label">下架</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>time</label>
                            <input id="times" readonly="readonly" name="times" class="form-control"th:value="${good!=null}?${good.times}:''">
                        </div>
                        <div class="form-group">
                            <label>type</label>
                            <select class="form-control">
                            <!--<option th:selected="${good!=null}?${dept.id == good.id}" th:value="${dept.id}" th:each="dept:${good}" th:text="${dept.departmentName}">1</option>-->
                            </select>
                        </div>
                        <div class="row form-group">
                            <label class="col-md-4">图片添加:</label>
                            <div class="col-sm-12">
                                <input id="input-id" name="file" multiple="multiple" type="file" data-show-caption="true"/>
                            </div>
                        </div>

                    </form>
                    <div th:if="${good!=null}" class="table-responsive">
                        <table class="table table-bordered table-hover table-light table-sm">
                            <thead>
                            <tr>
                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="pic:${good.pictures}">
                                <td><img style="height: 100px;width: 100px;object-fit: cover;overflow: hidden;" th:src="@{${goodsPicPath}+${pic.picURl}}"></td>
                                <td>
                                    <button th:attr="del_uri=@{/picture/del/}+${pic.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="msgDIV" class="alert alert-danger alert-dismissible fade show" style="display:none">
                        <strong id="msg"></strong>
                        <button id="noMsgBtn" type="button" class="close">&times;</button>
                    </div>
                    <div>
                        <button onclick="Submit()" id="submit" name="submit" class="btn btn-primary" th:text="${good!=null}?'修改':'添加'">添加</button>
                    </div>
                </div>
                <form id="delGoodsPicForm"  method="post">
                    <input id="url" type="hidden" name="url"/>
                </form>
            </main>
        </div>
    </div>

    <div class="modal fade" id="delModel">
        <div class="modal-dialog">
            <div class="modal-content message_align">
                <div class="modal-header">
                    <h4 class="modal-title">提示信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <p>您确认要删除吗？</p>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="attr"/>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button onclick="del()" class="btn btn-danger" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 核心 JavaScript -->
    <script type="text/javascript" src="../../static/js/jquery-3.3.1.js" th:src="@{../../static/js/jquery-3.3.1.js}"></script>
    <script type="text/javascript" src="../../static/js/popper.min.js" th:src="@{../../static/js/popper.min.js}"></script>
    <script type="text/javascript" src="../../static/js/bootstrap.min.js" th:src="@{../../static/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="../../static/js/Chart.min.js" th:src="@{../../static/js/Chart.min.js}"></script>
    <script type="text/javascript" src="../../static/js/piexif.js" th:src="@{../../static/js/piexif.js}"></script>
    <script type="text/javascript" src="../../static/js/fileinput.js" th:src="@{../../static/js/fileinput.js}"></script>
    <script type="text/javascript" src="../../static/js/zh.js" th:src="@{../../static/js/zh.js}"></script>
    <script type="text/javascript" src="../../static/js/bootstrap.bundle.min.js" th:src="@{../../static/js/bootstrap.bundle.min.js}"></script>
    <!-- Icons -->
    <script type="text/javascript" src="../../static/js/feather.min.js" th:src="@{../../static/js/feather.min.js}"></script>
    <script>
        feather.replace()
    </script>
    <script type="text/javascript">
        var url=window.location.pathname;
        $(function () {
            initFileInput("input-id");
        })

        function initFileInput(ctrlName) {
            var control = $('#' + ctrlName);
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/upload/uploadGoods", //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
                uploadAsync: true, //默认异步上传
                showUpload: false, //是否显示上传按钮
                showRemove : true, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                //dropZoneEnabled: true,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 9, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            }).on('filepreupload', function(event, data, previewId, index) {     //上传中
                //console.log('文件正在上传');
            }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
                var form = data.form, files = data.files, extra = data.extra,
                    response = data.response, reader = data.reader;
                //console.log(response);//打印出返回的json
                //console.log(response.status);//打印出路径
            }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
                //console.log('文件上传失败！'+data.status);
            }).on("filebatchselected", function(event, files) {
                //console.log('选择文件后:::::')
                //console.log(files)
                if (($('.form-control-file').find('.file-preview-frame').length) * 0.5 > 9) {
                    showFormText('#words-error', '图片最多为9张');
                }
            });
        }
        function Submit()
        {
            var name=$('#name').val();
            var buying_price=$('#buying_price').val();
            var selling_price=$('#selling_price').val();
            var place=$('#place').val();
            var times=$('#times').val();
            if(name==''||name==null)
            {
                document.getElementById("msgDIV").style.display='block';
                $('#msg').text('商品名不能为空')
            }
            else if(!check(buying_price))
            {
                document.getElementById("msgDIV").style.display='block';
                $('#msg').text('进价不符合规范')
            }
            else if(!check(selling_price))
            {
                document.getElementById("msgDIV").style.display='block';
                $('#msg').text('售价不符合规范')
            }
            else if(place==''||place==null)
            {
                document.getElementById("msgDIV").style.display='block';
                $('#msg').text('产地不能为空')
            }
            else
            {
                var a=$('#submit').text();
                if(a=='修改')
                {
                    $('#state').val(1);
                }
                else
                {
                    $('#state').val(0);
                }
                $('#uploadForm').submit();
            }
            // else if(!IsDate(times))
            // {
            //     document.getElementById("msgDIV").style.display='block';
            //     $('#msg').text('时间不符合规范')
            // }

        }

        $(".deleteBtn").click(function(){
            $('#delModel').modal();
            $("#attr").val($(this).attr("del_uri"));
        });

        function del() {
            $('#url').val(url);
            $("#delGoodsPicForm").attr("action",$("#attr").val()).submit();
            return false;
        }
        $('#noMsgBtn').click(function ()
        {
            if(document.getElementById("msgDIV"))
            {
                document.getElementById("msgDIV").style.display="none";
            }
        })

        //判断小数
        function check(value)
        {
            var n = /(^[0-9]{1,8}$)|(^[0-9]{1,8}[\.]{1}[0-9]{1,2}$)/;
            var re = new RegExp(n);
            if (re.test(value))
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        function IsDate(d){
            var regexp = /^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/;
            return regexp.test(d);
        }
    </script>
</body>
</html>